<template>
  <div class="get_btn">
    <Button type="primary" @click="getInfo">获取</Button>
  </div>
  <div class="list">
    <div v-for="item in formList" :key="item.id" class="list_item">
      <Row>
        <Col :span="8">
          <div :class="['custom_item', 'label', `label_${item.id}`]">
            <Input
              v-if="currentItem == item.id + 'label'"
              v-model:value="item.label"
              @change="onChange(item, 'label')"
              placeholder="请输入规格名称"
            ></Input>
            <div v-else @click.stop="onclick(item, 'label')" class="view">
              {{ item.label || '' }}
            </div>
            <div class="tip">此规格名称暂未填写</div>
          </div>
        </Col>
        <Col :span="16">
          <div :class="['custom_item', 'value', `value_${item.id}`]">
            <Input
              v-if="currentItem == item.id + 'value'"
              v-model:value="item.value"
              @change="onChange(item, 'value')"
              placeholder="自定义区域"
            ></Input>
            <div v-else @click.stop="onclick(item, 'value')" class="view">
              {{ item.value || '' }}
            </div>
            <Button
              danger
              type="primary"
              class="delete_btn"
              @click="onDelete(item)"
              >删除</Button
            >
            <div class="tip">暂未填写</div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
  <div>
    <Row>
      <Col :span="12">
        <!-- <div class="footer_btn">
          <Button type="primary" class="delete_btn" @click="onSubmit"
            >保存</Button
          >
        </div> -->
      </Col>
      <Col :span="12">
        <div class="footer_btn">
          <Button type="primary" class="delete_btn" @click="onAdd"
            >新增规格</Button
          >
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Ref } from 'vue';
import { Button, Col, Input, Row } from 'ant-design-vue';

const { formState, formRef } = defineProps<{
  formState?: Record<string, any>;
  formRef?: Ref<any>;
}>();
const currentItem = ref('');
const formList = defineModel('info', {
  type: Array,
  default: () => [],
});
const onclick = (item, type) => {
  currentItem.value = item.id + type;
};

const onAdd = () => {
  formList.value.forEach((item) => {
    if (!item.label || !item.value) {
      const label = document.querySelector(`.label_${item.id}`);
      const value = document.querySelector(`.value_${item.id}`);
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      !item.label && label.classList.add('danger');
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      !item.value && value.classList.add('danger');
      throw new Error();
    }
  });
  formList.value.push({
    label: '',
    value: '',
    id: formList.value.length + 1,
  });
};

const onDelete = (item) => {
  const index = formList.value.findIndex((i) => i.id === item.id);
  formList.value.splice(index, 1);
};

const getInfo = async () => {
  await formRef.validate();
};

const onSubmit = () => {
  console.log(formList.value, 'formList');
};

const onChange = (item, type) => {
  const box = document.querySelector(`.${type + '_' + item.id}`);
  if (!item[type]) return box.classList.add('danger');
  box.classList.remove('danger');
};
</script>

<style scoped lang="scss">
.list {
  max-height: 40vh;
  overflow-y: auto;
  &_item {
    &:first-child .custom_item {
      border-top: 1px solid #ccc;
    }
    &:hover {
      .custom_item.value {
        padding-right: 88px;
        .delete_btn {
          display: block;
        }
      }
    }
    .custom_item {
      position: relative;
      padding: 12px;
      border-bottom: 1px solid #ccc;
      .tip {
        position: absolute;
        font-size: 10px;
        bottom: -1px;
        color: #ff5a5b;
        display: none;
      }
      &.danger {
        .tip {
          display: block;
        }
      }
      &.label {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
      }
      &.value {
        border-right: 1px solid #ccc;
        .delete_btn {
          display: none;
        }
      }
      .view {
        height: 32px;
        line-height: 32px;
      }
      .delete_btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.footer_btn {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 60px;
  padding: 0 20px;
  :deep(.ant-btn) {
    width: 100%;
  }
}
.get_btn {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;
}
</style>
